<template>
  <div class="yunqithird">

    <div class="aui-bar aui-bar-nav aui-barPailuan">
      <!--<a class="aui-pull-left aui-padded-l-15 icon iconfont icon-fanhuijiantou1 " style="color:#0075f0 !important;" @click="goBack()">-->
      <!--<div style="color: black;margin-left: 1rem">排卵</div>-->
      <!--</a>-->
      <a class="aui-pull-left" style="    padding: 0 !important;">
        <img style="width: 2.5rem;;" src="../../../../static/img/back-b.png" alt=""  @click="goBack()">
        <div >
        <span style="margin-top:-0.85rem;left:4.5rem;position: absolute;color: black; font-size: 18px;	font-family: 'Helvetica Neue', Helvetica, sans-serif;">
              孕期
            </span>
        </div>
      </a>
    </div>
    <section class="sectionMagin">
      <div class="niaoJian4">
        <img class="public" src="../../../../static/img/pregnancy_circle.png" alt="">
        <img class="publicItem" src="../../../../static/img/pregnancy_icon.png" alt="">
        <img style="width:100%;margin-top:1rem" src="../../../../static/img/gif.gif" alt="">
      </div>
      <div class="clearfloat"></div>

      <div class="bHint bottomBtn" >
        <div v-if="IsDealING==false" class="aui-font-size-12 aui-text-center aui-margin-b-10 textColor">正在等待试纸反应，检测将于{{timeNum}}秒后开始。</div>
        <div v-if="IsDealING==true" class="aui-font-size-12 aui-text-center aui-margin-b-10 textColor">检测开始，检测过程需2-4分钟，请耐心等待。</div>
        <div  @click="zhongDuan()" class="aui-btn SubBtnYunQiThird">中断检测</div>
      </div>
    </section>
    <JianCeConnect v-if="JianCeConnect"></JianCeConnect>
    <checkConnectResAlert v-if="checkConnectRes"></checkConnectResAlert>
    <IsQuitAlert v-if="isShowQuit" @closeTipQuit="closeTipQuit" @goToDoQuit="goToDoQuit" :alertTextQuit="alertTextQuit"></IsQuitAlert>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import Loading from '../../common/Loading'
  import JianCeConnect from '../../common/JianCeConnect'
  import IsQuitAlert from '../../common/IsQuitAlert'
  import addtoAlert from '../../common/addtoAlert'
  import checkConnectResAlert from '../../common/checkConnectResAlert'

  export default {
    name: 'YunQiThird',
    data () {
      return {
        JianCeConnect:false,
        timeNum:0,
        IsDealING:false,
        exitTime: 0,
        alertTextQuit: '正在检测中，离开页面将中断检测！',
        isShowQuit:false
      }
    },
    computed: {
      ...mapState([
        'DetectionResult','IsYunjDone','startJianceTime','ConnectStatus','yunPaiPage','checkConnectRes'
      ])
    },
    watch: {
      startJianceTime(val){
        if(this.startJianceTime==0){
          this.IsDealING  = false
          this.isShowQuit = false
        }
        if(this.startJianceTime>180){
          this.IsDealING = true
        }
        this.timeNum = 180-this.startJianceTime
      },
      IsYunjDone (val) {
        console.log(this.yunPaiPage)
        if(this.yunPaiPage==='yunqi'){
          this.DoDetectionResult()
          this.AxiosSETPregnant()
        }
      }
    },
    components: {
      checkConnectResAlert,
      IsQuitAlert,
      JianCeConnect,
      Loading,
      addtoAlert
    },
    created () {
      // this.STARTYJ({num:2})
    },
    methods: {
      ...mapMutations([
        'showAddtoAlert','OPJCLOSS','AxiosSETPregnant'
      ]),
      zhongDuan(){
        if(this.ConnectStatus==false){
          this.JianCeConnect = true
          return
        }
        this.alertTextQuit="正在检测中，确认中断检测？"
        this.isShowQuit = true
        //
        // clearTimeout(window.yunqisetTimeOUTn)
        // this.OPJCLOSS()
        // this.$router.go(-1)
      },
      goPath (pth) {
        this.$router.replace({path:pth})
      },
      goBack(){
        if(this.ConnectStatus==false){
          this.JianCeConnect = true
          return
        }
        this.isShowQuit = true
      },
      closeTipQuit(){
        this.isShowQuit = false
      },
      goToDoQuit(){
        if(this.ConnectStatus==false){
          this.JianCeConnect = true
          return
        }
        clearTimeout(window.yunqisetTimeOUTn);
        this.OPJCLOSS()
        this.$router.go(-1)
      },
      DoDetectionResult () {
        // var yunjRe = this.DetectionResult;
        if(this.$route.path == '/yunqithird') {

          // this.$router.push({path:'/yunqiforth'})
          this.$router.replace({path:'/yunqiforth'})
          // if (yunjRe==0) {
          //   alert("未怀")
          // } else if(yunjRe==1) {
          //   alert("怀")
          // } else {
          //   alert("错误")
          // }
        }

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

  @media screen and (max-width:320px){
    body{font-size: 12px;}
    .order{padding-top:0.1rem; padding-right: 0.1rem;}
    .stepImg2 img{height:5rem}
  }
  @media screen and (min-width:321px) and (max-width:376px){
    body{font-size: 14px;}
  }
  @media screen and (min-width:377px) and (max-width:415px){
    body{font-size: 16px;}
    .order{padding-right: 0.1rem;}
  }
  body{background: #fff !important;}
  .aui-barPailuan{
    border-bottom: 2px solid #e2e2e2;
    background: #ffffff;

  }
  .aui-bar a{
    color:#000;
    font-size: 20px!important;
    font-weight: bold!important;
  }
  /*.step1{*/
  /*width:100%;*/
  /*!*position:relative;*!*/
  /*}*/
  .heartImg1{  /*心率图片设置*/
    display: block;
    width:70%;
    margin:2rem auto;
    /*margin-top:2rem;*/
  }
  .order{
    margin-top:1rem;
    margin-left:2rem;
    width:1.5rem;
    height:1.5rem;
    border-radius: 1rem;
    font-size: 1rem;
    background: #ccc;
    text-align: center;
    color:#000;
  }
  .method{
    width:80%;
    margin:auto;
  }
  .stepImg2 img{height:10rem;margin:auto}
  .stepImg3 img{width:80%;margin:auto;padding-top:5rem}
  .yunQistep2 img{height:8rem;margin:auto}

  .niaoJian4{
    width:100%;
    height:18rem;
    position: relative;
    margin-top: 5rem;
  }
  .niaoJian4 img{display:block;width:2.5rem;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}
  /*@keyframes WPublic{*/
  /*0% {transform: scale(0.6);}*/
  /*35% {transform: scale(0.8);}*/
  /*50%{transform: scale(1);}*/
  /*65% {transform: scale(0.8);}*/
  /*100% {transform: scale(0.6);}*/
  /*}*/
  @keyframes rotatingWPublicItem{  /*背景部分动态*/
    0% {transform:rotate(0deg)}
    50% {transform:rotate(-45deg)}
    100% {transform:rotate(360deg)}
  }
  @keyframes WPublicItem{
    0% {transform: scale(0.6);}
    35% {transform: scale(0.8);}
    50%{transform: scale(1);}
    65% {transform: scale(0.8);}
    100% {transform: scale(0.6);}
  }
  .niaoJian4 .public{
    -webkit-animation:rotatingWPublicItem 2s linear infinite;
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25%;
    margin-left:-25%;
    z-index: 0;
  }
  .niaoJian4 .publicItem{
    -webkit-animation:WPublicItem 2s linear infinite;
    width:30%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-15%;
    margin-left:-15%;
    z-index: 0;
  }
  .niaoJian4 .outer_1{top:-70%}
  .niaoJian4 .outer_2{bottom:-70%}
  .niaoJian4 .outer_3{left:-70%}
  .niaoJian4 .outer_4{right:-70%}
  .niaoJian4 .outer_5{top:-50%;right:-50%}
  .niaoJian4 .outer_6{top:-50%;left:-50%}
  .niaoJian4 .outer_7{bottom:-50%;right:-50%}
  .niaoJian4 .outer_8{bottom:-50%;left:-50%}

  /*是否怀孕样式*/
  .verify img{width:80%;margin:auto}
  .weiHuaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;right:0}
  .huaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;left:0}


  /*排卵*/
  .ovulation{position: absolute;top:50%;margin-top:-25%;left:50%;margin-left:-25%}



  .borStyle{
    width:90%;
    border:1px solid #ccc;
    margin:0 5%;
  }
  .bHint{
    width:100%;
    /*position: absolute;*/
    /*bottom:1rem;*/
  }
  .SubBtnYunQiThird{
    width: 90%;
    height: 3rem!important;
    line-height: 3rem!important;
    margin: 0 5%!important;
    color: #0075f0;
    font-size: 1.2rem!important;
    border: 1px solid #eee;
    border-radius: 1.5rem!important;
    background: #f7f7f7!important;
  }
  .step2{
    width:100%;
  }


  /*可视心率showHeart1页面的样式*/
  .heartStep{
    padding-left:1.5rem;
  }
  .radioStyle{
    display: inline-block;
    width:1rem;
    height:1rem;
    background: #008fd9;
    color: #fff;
    border-radius: 1rem;
    text-align: center;
  }
  /*可视心率showHeart2页面的样式*/
  .heart2{/*可视心率showHeart2图片位置*/
    height:12rem;
    width:100%;
    margin-top:2rem;
  }
  .heart2 img{margin:auto}

  .audio{
    display: block;
    width:4rem;
    margin:auto;
    margin-top:-3rem;
  }
  .heartData{
    border-right:1px solid #ccc;
  }


  .textColor{
    color:#ccc;
  }
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
  .aui-bar{
    padding-top: 25px !important;
    padding-left: 10px !important;
    padding-bottom: 5px !important;
  }
  .aui-bar a{
    padding: 0 !important;
    /*padding-bottom: 1px !important;*/
    /*padding-left: 30px !important;*/
    /*padding-right: 30px !important;*/

  }
</style>

